<template>
  <el-dialog
      title="裁剪图片"
      v-model="visible"
      custom-class="cropper-dialog"
      :closed="closed"
  >
    <div class="operate">
      <div :style="{ width: width, height: height }">
        <v3-cropper
            ref="cropper"
            v-if="src"
            :src="src"
            :autoCropArea="0.95"
            :style="{
            height: '100%',
          }"
        />
      </div>
      <div class="operate-btn">
        <el-tooltip content="逆时针旋转" placement="top">
          <i
              class="el-icon-refresh-left"
              @click="bindOperate('rotate', '-90')"
          ></i>
        </el-tooltip>
        <el-tooltip content="顺时针旋转" placement="top">
          <i
              class="el-icon-refresh-right"
              @click="bindOperate('rotate', '90')"
          ></i>
        </el-tooltip>
        <el-tooltip content="还原" placement="top">
          <i
              class="el-icon-refresh"
              @click="bindOperate('reset', undefined)"
          ></i>
        </el-tooltip>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="bindClose">取 消</el-button>
        <el-button type="primary" @click="bindConfirm" :loading="loading">{{
            loading ? "上传中" : "确 定"
          }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {imgCompressor, getBase64} from "@/utils";

import v3Cropper from "vue3-cropperjs";
import "vue3-cropperjs/dist/v3cropper.css";

export default {
  name: "DialogCropper",
  components: {
    v3Cropper,
  },
  props: {
    width: {
      type: String,
      default: "600px",
    },
    height: {
      type: String,
      default: "400px",
    },
  },
  data() {
    return {
      visible: true,
      src: "",
      name: "",
      type: "",
      loading: false,
    };
  },
  methods: {
    async init(file) {
      const base64 = await getBase64(file);
      const {name, type} = file;
      this.name = name;
      this.type = type;
      this.src = base64;
    },
    bindClose() {
      this.visible = false;
    },
    closed() {
      this.$emit("closed");
    },
    bindOperate(fn, params) {
      this.$refs.cropper[fn](params);
    },
    // 裁剪并上传到服务器
    bindConfirm() {
      this.loading = true;
      const {width, height} = this.$refs.cropper.getImageData();
      this.$refs.cropper.getCroppedCanvas().toBlob(async (blob) => {
        // 压缩图片
        const compressFile = await imgCompressor({
          blob,
          width,
          height,
          name: this.name,
          type: this.type,
        }).catch(() => {
          this.loading = false;
        });
        this.$parent.upload(compressFile).then((res) => {
          this.$emit("success", res);
          this.bindClose();
        }).finally(() => {
          this.loading = false;
        });
      });
    },
  },
};
</script>
<style scoped>
.operate {
  position: relative;
}

.operate-btn {
  position: absolute;
  bottom: 0;
  right: 0;
}

.operate-btn i {
  color: #fff;
  font-size: 18px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  transform: rotate(90deg);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  overflow: hidden;
  margin-right: 5px;
  opacity: 0.8;
  transition: all 0.5s ease;
  vertical-align: middle;
}

.operate-btn i:hover {
  opacity: 1;
  cursor: pointer;
}
</style>

<style>
.cropper-dialog {
  position: fixed;
  left: 50%;
  margin-left: -20%;
  width: unset !important;
}
</style>
